import React from "react";
import {Modal, Form, Input, Radio, Select, message} from 'antd';
import {_addSysUser, _deleteSysUser, _getRolePullDown, _updateSysUser} from "../../../utils/apiList";

const {TextArea} = Input;
const {Option} = Select;

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};

const CollectionCreateForm = Form.create({name: 'form_in_modal'})(
    class extends React.Component {
        render() {
            const {visible, onCancel, onCreate, form, roleList} = this.props;
            const {getFieldDecorator} = form;
            const options = roleList.map(d => <Option key={d.value.toString()}>{d.label}</Option>);
            return (
                <Modal
                    visible={visible}
                    title="修改用户信息"
                    okText="提交"
                    cancelText="取消"
                    onCancel={onCancel}
                    onOk={onCreate}
                    centered
                    bodyStyle={{maxHeight: '70vh', overflow: 'scroll'}}
                >
                    <Form layout="vertical">
                        <Form.Item label="用户名">
                            {getFieldDecorator('userName', {
                                rules: [{required: true, message: '请填写登录用户名!'}],
                            })(<Input/>)}
                        </Form.Item>
                        <Form.Item label="密码">
                            {getFieldDecorator('password')(<Input.Password placeholder={'不填写，默认为123456'}/>)}
                        </Form.Item>
                        <Form.Item label="真实姓名">
                            {getFieldDecorator('userNameCn', {
                                rules: [{required: true, message: '请填写用户真实姓名!'}],
                            })(<Input/>)}
                        </Form.Item>
                        <Form.Item label="权限类型">
                            {getFieldDecorator('roleId')(<Select>{options}</Select>)}
                        </Form.Item>
                        <Form.Item label="手机号">
                            {getFieldDecorator('phone', {
                                rules: [{required: true, message: '请填写用户手机号!'}],
                            })(<Input/>)}
                        </Form.Item>
                        <Form.Item label="邮箱">
                            {getFieldDecorator('mail')(<Input/>)}
                        </Form.Item>
                        <Form.Item label="备注">
                            {getFieldDecorator('remark')(<TextArea rows={4}/>)}
                        </Form.Item>
                    </Form>
                </Modal>
            );
        }
    },
);

class EditModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {visible: false, editRecord: {}};
    }

    showModal = (editRecord) => {
        this.setState({visible: true, editRecord});
        this.handleLoad(editRecord);
    };

    handleCancel = () => {
        const {form} = this.formRef.props;
        form.resetFields();
        this.setState({visible: false});
    };

    handleLoad = (editRecord) => {
        const {form} = this.formRef.props;
        form.setFieldsValue({
            userName: editRecord.userName,
            userNameCn: editRecord.userNameCn,
            roleId: editRecord.roleId.toString(),
            mail: editRecord.mail,
            phone: editRecord.phone,
            remark: editRecord.remark,
        });
    };


    handleCreate = () => {
        const {form} = this.formRef.props;
        const {editRecord} = this.state;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            const params = values;
            params.id = editRecord.id;
            _updateSysUser(values).then((res) => {
                if (res.data.success) {
                    message.success(<b>用户信息修改成功</b>, 3);
                    form.resetFields();
                    this.setState({visible: false});
                    this.props.parent.loadTable();
                } else {
                    message.error(<b>{res.data.msg}</b>, 3);
                }
            }).catch(error => {
                message.error(<b>请求失败！</b>, 3);
            });
        });
    };

    saveFormRef = formRef => {
        this.formRef = formRef;
    };

    render() {
        const {roleList} = this.props;
        const {visible} = this.state;
        return (
            <CollectionCreateForm
                wrappedComponentRef={this.saveFormRef}
                visible={visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
                roleList={roleList}
            />
        );
    }
}

export default EditModal;